<template>
	<view class="root">
		<view class="header relative">
			<view class="safe-area-inset-top" />
			<image
				src="/static/images/bg-index.png"
				class="absolute top-0 width-100percent height-100percent"
			/>
			<image
				class="logo absolute br-circle"
				:src="baseData.logo"
				mode="aspectFit"
			/>
		</view>

		<view class="main bgc-fff">
			<text class="fs-50 color-262626 fw-800 text-center lh-2">Hi~</text>
			<view class="ml-20 mr-20">
				<view
					v-for="(item, index) in inputs"
					:key="index"
					class="bb-e5 height-66 fd-row ai-center mt-30 pl-30 pr-30"
				>
					<image
						class="width-28 height-32"
						:src="`/static/images/icon-${item.model}.png`"
						mode="aspectFit"
					/>
					<input
						class="input f1 ml-44 height-100percent width-0 fs-26"
						placeholder-class="color-999"
						:type="item.type"
						:maxlength="item.maxlength"
						:placeholder="item.placeholder"
						:adjust-position="false"
						v-model="model[item.model]"
					/>
					<button
						v-if="item.model === 'verificationCode'"
						class="btn-getVerificationCode bgc-2e8ef7 fs-24 color-fff lh-2 ml-12"
						hover-class="tap-hover"
						hover-start-time="50"
						:disabled="codeBtn.disabled"
						@click="getVerificationCode"
					>
						{{ codeBtn.text }}
					</button>
				</view>
			</view>
			<view
				class="operation mt-24 ml-20 mr-20 pl-24 fd-row ai-center color-307ff6 fs-24"
			>
				<view
					class="f1"
					hover-class="tap-hover"
					hover-start-time="50"
					v-for="item in operations"
					:key="item.type"
					@click="operation(item)"
				>
					<text :style="{ textAlign: item.textAlign }">
						{{ item.text }}
					</text>
				</view>
			</view>

			<button
				class="btn-submit color-fff fs-38 fw-700 br-40"
				hover-class="tap-hover"
				@click="submit"
			>
				{{ tipsText[page].submit }}
			</button>

			<view class="ai-center mt-40">
				<view
					v-if="page !== 'forgetPassword'"
					class="mt-30 fd-row jc-center ai-center fs-22"
				>
					<label>
						<switch
							@change="isChecked"
							type="checkbox"
							:checked="isAgree"
							color="#fff"
						/>
						<text class="color-999">我已阅读并同意</text>
					</label>

					<navigator
						class="color-1b1b1b"
						hover-class="tap-hover"
						hover-start-time="50"
						:url="`/pages/common/webView?url=${decodeURIComponent(
							baseData.privacy
						)}`"
					>
						《隐私政策》
					</navigator>
					<text class="color-999">和</text>
					<navigator
						class="color-1b1b1b"
						hover-class="tap-hover"
						:url="`/pages/common/webView?url=${decodeURIComponent(
							baseData.agreement
						)}`"
					>
						《用户使用协议》
					</navigator>
				</view>

				<text class="mt-26 fs-16 color-333 opacity-06">
					{{ baseData.copyright }}
				</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { $config } from "@/common";
	import Vue from "vue";
	import Component from "vue-class-component";
	import { Storage, isPhoneNumber } from "../../libs/utils";

	const inputs = [
		{
			model: "account",
			type: "number",
			maxlength: 11,
			placeholder: "请输入手机号码",
		},
		{
			model: "verificationCode",
			type: "number",
			maxlength: 6,
			placeholder: "请输入验证码",
		},
		{
			model: "password",
			type: "password",
			maxlength: 16,
			placeholder: "请输入密码",
		},
	];

	const operations: AnyObject[] = [
		{
			type: "forgetPassword",
			text: "忘记密码",
			openType: "navigate",
			textAlign: "right",
		},
		{
			type: "login",
			text: "去登录",
			openType: "navigateBack",
			textAlign: "right",
		},
	];

	@Component
	export default class Index extends Vue {
		inputs: AnyObject[] = [];
		operations: AnyObject[] = [];
		notIOS = true || uni.getSystemInfoSync().platform !== "ios";
		model: AnyObject = {
			account: "",
			verificationCode: "",
			password: "",
		};
		tipsText: AnyObject = {
			login: {
				title: "欢迎您登录！",
				submit: "登录",
			},
			forgetPassword: {
				title: "忘记密码",
				submit: "确定",
			},
		};
		codeBtn: AnyObject = {
			text: "获取验证码",
			disabled: false,
			count: 60,
		};
		timer: null | number = null;
		page: string = "login";
		isAgree: boolean = false;

		baseData: AnyObject = {};

		onLoad({ page }: { page: string }) {
			this.inputs = JSON.parse(JSON.stringify(inputs));

			this.request.get("/store/getBase").then(({ data }) => {
				this.baseData = Storage.set("baseData", data);
			});
			switch (page) {
				case "forgetPassword":
					operations[1].text = "返回登录";
					this.operations = [operations[1]];
					break;

				default:
					page = "login";
					this.inputs.splice(1, 1);
					this.operations = [operations[0]];
					break;
			}

			this.page = page;
		}
		onUnload() {
			this.timer && clearInterval(this.timer);
			this.timer = null;
		}

		isChecked({ detail }: AnyObject) {
			this.isAgree = detail.value;
		}
		operation(item: AnyObject) {
			item.openType === "navigate"
				? uni.navigateTo({
						url: `/pages/common/authorization?page=${item.type}`,
				  })
				: uni.navigateBack({});
		}
		countdown() {
			this.codeBtn.disabled = true;
			this.timer = setInterval(() => {
				this.codeBtn.count--;
				this.codeBtn.text = `${this.codeBtn.count}s后再试`;

				if (this.codeBtn.count <= 0) {
					this.codeBtn.disabled = false;
					this.codeBtn.text = "获取验证码";
					this.codeBtn.count = 60;
					this.timer && clearInterval(this.timer);
					this.timer = null;
				}
			}, 1000);
		}
		getVerificationCode() {
			if (this.codeBtn.disabled) return;

			isPhoneNumber(this.model.account)
				? this.request
						.get("/employee/sendSms", {
							account: this.model.account,
						})
						.then(({ msg: title }) =>
							uni.showToast({
								title,
								success: this.countdown,
							})
						)
				: uni.showToast({
						title: "请检查手机号码是否输入正确",
						icon: "none",
				  });
		}

		submit() {
			if (this.page !== "forgetPassword" && !this.isAgree) {
				uni.showToast({
					icon: "none",
					title: "你需要先同意相关协议和政策后才能继续",
				});
				return;
			}

			const { account, password, verificationCode } = this.model;

			if (!isPhoneNumber(account) || !password) {
				uni.showToast({
					title: "请检查手机号码或密码是否输入正确",
					icon: "none",
				});
				return;
			}

			uni.showLoading({ title: "Loading..." });

			let cid: string | void = void 0;
			// #ifdef APP-PLUS
			cid = plus.push.getClientInfo().clientid;
			// #endif

			switch (this.page) {
				case "login":
					this.request
						.get("/employee/login", { account, password, cid })
						.then(({ data }) => {
							Storage.set(
								"userInfo",
								data,
								$config.authorizationValidPeriod
							);
							uni.switchTab({
								url: $config.page.home,
								complete: uni.hideLoading,
							});
						});
					break;
				case "forgetPassword":
					this.request
						.get("/employee/forget", {
							account,
							code: verificationCode,
							password,
						})
						.then(({ msg: title }) =>
							uni.showToast({
								title,
								success: () =>
									setTimeout(() => uni.navigateBack, 1500),
							})
						);
					break;

				default:
					uni.showToast({
						title: "program abnormal",
						icon: "none",
					});
					return;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.root {
		::v-deep {
			switch {
				transform: scale(0.6);
				.wx-checkbox-input,
				.uni-checkbox-input {
					border-color: #0d81f6;
					background-color: transparent;
				}

				.wx-checkbox-input.wx-checkbox-input-checked,
				.uni-checkbox-input.uni-checkbox-input-checked {
					background-color: #0d81f6;
				}

				&:not([disabled]) {
					.wx-checkbox-input:hover,
					.uni-checkbox-input:hover {
						border-color: #0d81f6;
					}
				}
			}
		}
		.header {
			height: 510rpx;
			.logo {
				width: 150rpx;
				height: 150rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #7babff;
				border: 3rpx solid #a2d6ff;
				box-shadow: 0 0 1rpx 0 rgba(0, 0, 0, 0.44);
			}
		}
		.main {
			z-index: 2;
			margin: -50rpx 30rpx 40rpx;
			padding: 50rpx;
			box-shadow: 0 8rpx 63rpx rgba(116, 116, 116, 0.3);
			border-radius: 22rpx;
			.bb-e5 {
				border-bottom: 1rpx solid #e5e5e5;
			}
			.btn-getVerificationCode {
				padding: 0 12rpx;
			}
			.btn-submit {
				text-indent: 0.5em;
				letter-spacing: 0.5em;
				margin: 60rpx 20rpx 0;
				background-image: linear-gradient(-90deg, #4cb1f9, #2857ff);
				box-shadow: 0 6rpx 23rpx 2rpx rgba(2, 85, 196, 0.3);
			}
		}
	}
</style>
